<template>
	<view>
		<view class="order-list">
			<view v-for="(item, key) in orderList" :key="key" hover-class="none" class="order-item bg-white mt20">
				<view class="order-header row-between">
					<view class="row">
						<view v-if="item.order_type == 1" class="mr10">
							<u-tag text="秒杀" size="mini" type="primary" mode="plain" />
						</view>
						<view v-if="item.order_type == 2" class="mr10">
							<u-tag text="拼团" size="mini" type="primary" mode="plain" />
						</view>
							<view v-if="item.order_type == 3" class="mr10">
							<u-tag text="砍价" size="mini" type="primary" mode="plain" />
						</view>
						订单编号：{{item.order_sn}}
					</view>
					<!-- <view :class="item.order_status == 4 ? 'muted' : 'primary'">{{getOrderStatus(item.order_status)}}</view> -->
				</view>
				<view class="order-con">
					<view class="order-goods bg-white">
					    <view v-for="(item, index) in item.order_goods" :key="index" class="item-wrap">
					        <view class="item row">
					            <view class="goods-img">
					                <custom-image width="180rpx" radius="10rpx" height="180rpx" lazy-load :src="item.image_str || item.image"></custom-image>
					            </view>
					            <view class="goods-info ml20 flex1">
					                <view class="goods-name line2 mb10">
					                    <u-tag class="mr10" v-if="team.need" :text="team.need + '人团'" size="mini" type="primary" mode="plain" />
										 {{item.goods_name || item.name}}</view>
					                <view class="goods-spec xs muted mb20">{{item.spec_value_str || item.spec_value}}</view>
					                <view class="row-between">
					                    <view class="goods-price row">
					                        <!-- <view class="primary">
												<price-format v-if="item.is_show_member" :weight="500" :subscript-size="24" :first-size="34" :second-size="24" :price="item.original_price"></price-format>
					                            <price-format v-else :weight="500" :subscript-size="24" :first-size="34" :second-size="24" :price="item.goods_price"></price-format>
					                        </view>
											<view class="vip-price row" v-if="item.is_show_member">
												<view class="price-name xxs">会员价</view>
												<view style="padding: 0 10rpx"> 
													<price-format :price="item.goods_price" :first-size="22" :second-size="22" :subscript-size="22"
														 :weight="500" color="#7B3200"></price-format>
												</view>
											</view> -->
					                    </view>
					                    <view class="goods-num sm ">x{{item.goods_num}}</view>
					                </view>
					            </view>
					        </view>
					        <view class="goods-footer row" v-if="link && item.comment_btn || item.refund_btn">
					            <view style="flex: 1"></view>
					            <navigator class="mr20" hover-class="none" :url="'/pages/bundle/goods_reviews/goods_reviews?id=' + item.id" v-if="item.comment_btn">
					                <button size="xs" class="plain br60" hover-class="none" >
					                    评价晒图
					                </button>
					            </navigator>
					            <navigator v-if="item.refund_btn" hover-class="none" :url="'/pages/bundle/apply_refund/apply_refund?order_id=' + item.order_id + '&item_id=' + item.item_id">
					                <button size="xs" class="plain br60" hover-class="none">
					                    申请退款
					                </button>
					            </navigator> 
					        </view>
					    </view>
					</view>
					<view class="all-price row-end">
						<!-- <text class="muted xs">共{{item.goods_count}}件商品，总金额：</text> -->
						<text class="muted xs">共{{item.goods_count}}件商品</text>
						<!-- <price-format :subscript-size="30" :first-size="30" :second-size="30" :price="item.order_amount"></price-format> -->
					</view>
				</view>
			</view>
			<loading-footer :status="status" :slot-empty="true" @refresh="reload">
				<view slot="empty" class="column-center" style="padding-top: 200rpx">
					<image class="img-null" src="/static/images/goods_null.png"></image>
					<text class="lighter">暂无订单</text>
				</view>
			</loading-footer>
		</view>
		<order-dialog ref="orderDialog" :order-id="orderId" :type="type" @refresh="reflesh"></order-dialog>
		<loading-view v-if="showLoading" background-color="transparent" :size="50"></loading-view>
	</view>
</template>


<script>
	import {
		orderLists
	} from "@/api/goodsBrand";
	import {
		prepay
	} from '@/api/app';
	import {
		loadingType
	} from '@/utils/type';
	import {
		loadingFun
	} from '@/utils/tools'
	export default {
		data() {
			return {
				page: 1,
				orderList: [],
				status: loadingType.LOADING,
				showCancel: false,
				type: 0,
				orderId: "",
				showLoading: false,
				team:[],
				link:false
			};
		},
		props: {
			orderType: {
				type: String
			}
		},
		created: function() {
			uni.$on("refreshorder", () => {
				this.reflesh()
			})
		},
		beforeMount: function() {
			this.getOrderListFun();
		},
		destroyed: function() {
			uni.$off("refreshorder")
		},
		methods: {
			orderDialog() {
				this.$refs.orderDialog.open()
			},
			getOrderListFun() {
				let {
					page,
					orderType,
					orderList,
					status
				} = this;
				orderLists({
					page:page
				}).then(res=>{
					console.log(res)
				})
				// const data = await loadingFun(orderLists, page, orderList, status, {
				// 	type: orderType
				// })
				// if (!data) return
				// this.page = data.page
				// this.orderList = data.dataList
				// this.status = data.status
			}

		},
		computed: {
			
			getCancelTime() {
				return (time) => time - Date.now()/1000
			}
		}
	};
</script>
<style lang="scss">
	.order-list {
		min-height: calc(100vh - 80rpx);
		padding: 0 20rpx;
		overflow: hidden;

		.order-item {
			border-radius: 10rpx;

			.order-header {
				height: 80rpx;
				padding: 0 24rpx;
				border-bottom: 1px dotted #E5E5E5;
			}

			.all-price {
				text-align: right;
				padding: 0 24rpx 20rpx;
			}

			.order-footer {
				height: 100rpx;
				border-top: $-solid-border;
				padding: 0 24rpx;

				.plain {
					border: 1px solid #BBBBBB;

					&.red {
						border-color: $-color-primary;
					}

				}
			}
		}
	}
	.order-goods {
		.item {
		    padding: 20rpx 24rpx;
			.vip-price {
				margin: 0 10rpx;
				background-color: #FFE9BA;
				line-height: 30rpx;
				border-radius: 6rpx;
				overflow: hidden;
				.price-name {
					background-color: #101010;
					padding: 3rpx 10rpx;
					color: #FFD4B7;
					position: relative;
					overflow: hidden;
					&::after {
						content: '';
						display: block;
						width: 20rpx;
						height: 20rpx;
						position: absolute;
						right: -15rpx;
						background-color: #FFE9BA;
						border-radius: 50%;
						top: 50%;
						transform: translateY(-50%);
						box-sizing: border-box;
					}
				}
			}
		}
		.goods-footer {
		    height: 70rpx;
		    align-items: flex-start;
		    padding: 0 24rpx;
			.plain {
			    border: 1px solid #999;
			    height: 52rpx;
			    line-height: 52rpx;
			    font-size: 26rpx;
			}
		}
	}
</style>
